<template>
    <div>
        <DescribePanel :info="info" :editorwidth="800" :editorheight="250" :attributes="attributes" :events="events">
            <div class="tip">
                <Tip :placement="'top'" :content="'提示内容'">
                    <Button>向上</Button>
                </Tip>
            </div>
            <div class="tip">
                <Tip :placement="'bottom'" :content="'提示内容'">
                    <Button>向下</Button>
                </Tip>
            </div>
            <div class="tip">
                <Tip :placement="'left'" :content="'提示内容'">
                    <Button>向左</Button>
                </Tip>
            </div>
            <div class="tip">
                <Tip :placement="'right'" :effect="'dark'" :content="'提示内容'">
                    <Button>向右</Button>
                </Tip>
            </div>
        </DescribePanel>
    </div>
</template>

<script>
/* eslint-disable*/
import Tip from '../common/Tip'
import DescribePanel from './DescribePanel'
import Button from '../common/XbsjButton'

export default {
	components: {
		Tip,
		DescribePanel,
		Button
	},
	data() {
		return {
			value: true,
			info: {
				title: 'Tip  提示',
				des: '常用于展示鼠标 hover 时的提示信息。',
				editor: `\n<Tip :placement="'top'" :content="'提示内容'">\n <Button>向上</Button> \n</Tip>\n\n<script>\n  data() {\n     return {\n     }\n}\n<script>`
			},
			attributes: [
				{
					param: 'placement',
					des: '绑定值',
					type: 'String',
					selectvalue: 'top/bottom/left/right',
					defaultvalue: 'top'
				},
				{
					param: 'content',
					des: 'tip内容',
					type: 'String',
					selectvalue: '——',
					defaultvalue: '——'
				},
				{
					param: 'effect',
					des: 'tip样式',
					type: 'String',
					selectvalue: 'dark/light',
					defaultvalue: 'light'
				}
			],
			events: []
		}
	},
	mounted() {}
}
</script>

 <style scoped>
h2 {
	font-weight: 400;
}

.tip {
	padding-left: 100px;
	margin-bottom: 10px;
}
</style>
